<template>
  <div>
    <HeaderNav
      v-if="hasHeader"
      :backgroundColor="backgroundColor"
      :cusTomColor="cusTomColor"
      @updatePlaceholderHeight="updatePlaceholderHeight"
    />
    <keep-alive :include="['Home']">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import Vue from 'vue';
import HeaderNav from '@/components/common/HeaderNav.vue';
import { getOS, setTitle, androidCanBackProtocol } from '@king-fisher/hxm-business';

export default Vue.extend({
  components: {
    HeaderNav,
  },
  data() {
    return {
      hasHeader: window.getParam('screenMode') === 'fullScreen',
      placeholderHeight: 0,
      routerName: 'Home',
    };
  },
  computed: {
    backgroundColor() {
      return this.routerName === 'Home' ? '#ffffff' : '#F03036';
    },
    cusTomColor() {
      return this.routerName === 'Home' ? 'rgba(0, 0, 0, 0.85)' : '#ffffff';
    },
  },
  provide() {
    return {
      headerPlaceholderHeight: () => this.placeholderHeight,
    };
  },
  methods: {
    updatePlaceholderHeight(placeholderHeight) {
      this.placeholderHeight = placeholderHeight;
    },
  },
  mounted() {
    const SYSTEM = getOS();

    // 路由跳转前处理
    window.__GLOBAL_KF__.router.beforeEach((to: any, from: any, next: any) => {
      // 安卓系统版本
      const G_OS_VERSION = 5;

      if (
        SYSTEM.sys === 'iphone' ||
        (SYSTEM.sys === 'gphone' && parseInt(SYSTEM.version.split('.')[0], 10) >= G_OS_VERSION)
      ) {
        // 系统为ios或者安卓5版本及以后
        to.meta.title && setTitle(to.meta.title);
      }
      // 注册安卓的单页返回协议，使单页应用能够正常逐级返回
      androidCanBackProtocol();
      next();
    });
    this.$router.beforeEach((to, from, next) => {
      this.routerName = to.name;
      next();
    });
  },
});
</script>
<style>
.atom-notice-bar--full {
  display: flex;
  align-items: center;
  .atom-notice-bar__operation {
    display: flex;
    align-items: center;
  }
}
</style>
